<template>
    <div class="materials">
        <!-- 动态表单 -->
        <dynamic-form :formDataList='formDataList' @getFormData='getFormData'></dynamic-form>

        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline"
                        @click="$router.push('/basicData/materials/create')">创建物料清单</el-button>
                    <el-dropdown trigger="click">
                        <el-button type="primary" size="mini" icon="el-icon-s-operation" :disabled='isBatchCheck'
                            style='margin:0 10px'>批量操作
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <el-button type="text" size="mini" icon="el-icon-document" @click='batchDel'>批量删除
                                </el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-button type="primary" size="mini" icon="el-icon-upload2" plain @click='reportExport'
                        :disabled='computedTotal'>导出
                    </el-button>
                    <el-button type="primary" size="mini" icon="el-icon-download" plain
                        @click="leadingIn">导入</el-button>
                    <el-button type="text" size="mini" icon="el-icon-document"
                        @click="$router.push('/basicData/materials/loadLog')">查看导入日志</el-button>
                </div>
            </template>
            <template #r_btn>
                <div class="r_btn">
                    <pop-checkbox :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'></pop-checkbox>
                </div>
            </template>
        </custom-setbtn>

        <!-- 导入 -->
        <import-mould title='物料清单明细' ref='importMould' @importSuccess="importSuccess"></import-mould>

        <!-- 表格 -->
        <table-list :tableGroup='tableGroup' @getCheckedId='getCheckedId'
            :searchForm='formDataList.searchForm' @getTotal='getTotal' ref='tableList'>
        </table-list>
    </div>
</template>

<script>
    import {
        productColumns
    } from '@/api/customFieldController'
    import {
        bomExport
    } from '@/api/baseController'
    import tableList from './tableList.vue'
    import dynamicForm from '@/components/dynamicForm'
    import fileDownload from "js-file-download";
    export default {
        data() {
            return {
                formDataList: {
                    formGroup: [{
                            label: 'parentProductCode',
                            name: '父项产品编号',
                            placeholder: '请输入',
                            key: 'srk',
                        },
                        {
                            label: 'parentProductName',
                            name: '父项产品名称',
                            placeholder: '请输入',
                            key: 'srk'
                        },
                        {
                            label: 'parentProductSpecification',
                            name: '父项产品规格',
                            placeholder: '请输入',
                            key: 'srk'
                        },
                        {
                            label: 'childProductCode',
                            name: '子项产品编号',
                            placeholder: '请输入',
                            key: 'srk'
                        },
                        {
                            label: 'childProductName',
                            name: '子项产品名称',
                            placeholder: '请输入',
                            key: 'srk'
                        },
                        {
                            label: 'childProductSpecification',
                            name: '子项产品规格',
                            placeholder: '请输入',
                            key: 'srk'
                        },
                        {
                            label: 'remark',
                            name: '备注',
                            placeholder: '请输入',
                            key: 'srk'
                        }
                    ],
                    searchForm: {
                        parentProductCode:'',
                        parentProductName:'',
                        parentProductSpecification:'',
                        childProductCode:'',
                        childProductName:'',
                        childProductSpecification:'',
                        page: 1,
                        limit: 10
                    },
                    formSet: true,
                    type:'BOMInfo'
                },
                tableGroup: [],
                disposeGroup: [],
                tableTotal:0,
                ids:''
            }
        },
        components: {
            dynamicForm,
            tableList
        },
        computed:{
            isBatchCheck(){
                return this.ids.length <= 0
            },
            computedTotal(){
                return this.tableTotal <= 0
            }
        },
        mounted(){
            this.getProductColumns({
                type: 'BOMInfo'
            }).then(()=>{
                this.$refs.tableList.getBomList(this.formDataList.searchForm)
            })
        },
        methods: {
            getProductColumns: async function(data){
                const res = await productColumns(data)
                if (res.code == 200) {
                    this.disposeGroup = []
                    this.tableGroup = []
                    res.data.map((item, i) => {
                        const key = {
                            index:'80',
                            parentProductCode:'155',
                            parentProductName:'150',
                            parentProductSpecification:'100',
                            parentProductUnitName:'70',
                            childProductCode:'155',
                            childProductName:'150',
                            childProductSpecification:'100',
                            childProductUnitName:'70',
                            unitUsage:'70',
                            createTime:'145',
                            createUserName:'60',
                            updateTime:'145'
                        }
                        let width = key[item.name] ?? '180'
                        if (item.state) {
                            this.tableGroup.push({
                                label: item.name,
                                name: item.chineseName,
                                width
                            })
                        }
                        this.disposeGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            state: item.state
                        })
                    })
                }
            },
            //监视复选框值变化
            handleChangeDiposeGroup(disposeGroup) {
                let configureList = []
                configureList = disposeGroup.map(i => {
                    return {
                        name: i.label,
                        chineseName: i.name,
                        state: i.state
                    }
                })
                this.getProductColumns({
                    type: 'BOMInfo',
                    configureList
                }).then(()=>{
                    this.$refs.tableList.updateTable()
                })
            },
            getTotal(total){
                this.tableTotal = total
            },
            //获取勾选中表格的id
            getCheckedId(ids) {
                this.ids = ids
            },
            //点击查询获取表单数据
            getFormData(val) {
                val.page = 1
                this.$refs.tableList.getBomList(val)
            },
            // 导入
            leadingIn() {
                let obj = {
                    type: 'BOM',
                    importUrl: '/BOM/BOMImport',
                    isCover:true
                }
                this.$refs.importMould.openDialog(obj)
            },
            // 导入成功
            importSuccess() {
                this.$refs.tableList.getBomList(this.formDataList.searchForm)
            },
            //批量删除
            batchDel() {
               this.$refs.tableList.batchDel(this.ids)
            },
            //导出
            reportExport() {
                bomExport({ids:this.ids}).then(res => {
                    fileDownload(res, '物料清单' + new Date().dateFormat('yyyyMMddhhmmss') + '.xlsx', 
                        'application/vnd.ms-excel;charset=UTF-8')
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .materials {
        overflow: auto;
    }
</style>